<!--
 * @Author       : xiangmin
 * @File         : 图片预览
 * @Date         : 2023-11-06 18:53:11
 * @LastEditors  : xiangmin
 * @LastEditTime : 2024-05-07 14:50:54
-->
<template>
	<section class="image-warp inline-block">
		<img
			:src="src"
			:style="{ height, ...imageStyle }"
			class="object-contain block"
		/>
		<div
			v-if="preview"
			class="absolute left-0 top-0 w-full h-full hidden bg-#000/40 color-#fff mask"
		>
			<div class="f-c-c text-14px w-full h-full">
				<div
					class="cursor-pointer"
					@click="handlePreviewClick"
				>
					<EyeOutlined class="mr-4" />预览
				</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
import { EyeOutlined } from '@ant-design/icons-vue'
import Preview from './index'
import type { Index as Props } from './index.d'

const props = withDefaults(defineProps<Props>(), {
	height: '100px',
	mask: true,
	preview: true,
	maskClosable: true,
	escCloseable: true,
	lockBodyScroll: true
})
const handlePreviewClick = () => Preview(props)
</script>

<style scoped lang="less">
.image-warp {
	position: relative;

	&:hover {
		.mask {
			display: block;
		}
	}
}
</style>
